<template>
  <main-page>
    <div slot="body">
      <el-form :inline="true" :model="search" size="mini">
        <el-form-item>
          <el-date-picker
            v-model="search.dateTimeRange"
            type="datetimerange"
            align="left"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00', '23:59:59']"
            value-format="yyyy-MM-dd HH:mm:ss"
            clearabled
          ></el-date-picker>
        </el-form-item>
         <el-form-item>
          <el-select v-model="search.orderStatus" style="width:100%" placeholder="支付状态" clearable>
            <el-option :key="0" label="未支付" :value="0"></el-option>
            <el-option :key="1" label="已支付" :value="1"></el-option>
          </el-select>
         </el-form-item>
         <el-form-item>
          <el-select v-model="search.orderType" style="width:100%" placeholder="订单状态" clearable>
            <el-option :key="0" label="VIP" :value="0"></el-option>
            <el-option :key="1" label="GOLD" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" @click="getOrdersList">搜索</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="tableData" style="width: 100%" tooltip-effect="dark">
        <el-table-column prop="id" label="编号" width="80"></el-table-column>
        <el-table-column label="昵称">
          <template slot-scope="scope">
            {{scope.row.usersVo != undefined ? scope.row.usersVo.nickName : ""}}
          </template>
        </el-table-column>
        <el-table-column prop="comboTitle" label="订单名称"></el-table-column>
        <el-table-column label="单价">
           <template slot-scope="scope">
            ￥ {{scope.row.comboPrice}} 元
          </template>
        </el-table-column>
        <el-table-column prop="orderNum" label="订单号" width="300"></el-table-column>
        <el-table-column label="支付状态">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.orderStatus == 1">支付成功</el-tag>
            <el-tag type="danger" v-else>未支付</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="订单状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.orderType == 1">GOLD</el-tag>
            <el-tag v-else>VIP</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="payType" label="支付类型">
          <template slot-scope="scope">
            <el-tag>{{scope.row.payType}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="订单生成时间">
          <template slot-scope="scope">{{scope.row.orderCreateTime | datetime}}</template>
        </el-table-column>
      </el-table>

      <pagination :listNum="listNum" @currentChange="handleCurrentChange"></pagination>
    </div>
  </main-page>
</template>

<script>
import { getOrdersList } from "api/OrdersApi";
export default {
  name: "OrdersList",
  data() {
    return {
      search: {
        currentIndex: 1,
        dateTimeRange: [],
        orderStatus: "",
        orderType: "",
        queryType: "admin"
      },
      tableData: [],
      listNum: 0
    };
  },
  methods: {
    getOrdersList() {
      getOrdersList(this.search).then(res => {
        if (res) {
          this.tableData = res.datas;
          this.listNum = res.pagination.totalCount;
        }
      });
    },
    handleCurrentChange(page) {
      this.search.currentIndex = page;
      this.getOrdersList();
    }
  },
  created() {
    this.getOrdersList();
  },
  watch: {}
};
</script>

<style lang="stylus" scoped></style>